<template>
    <div>
        <h2>添加公告</h2>
        <el-row class="mt10">
            <el-col :span="8">
                 <div>
                    <el-form
                        :model="form"
                        class="myform"
                        status-icon 
                        :rules="rules"
                        ref="myform"
                        label-position="top"
                    >
                        <el-form-item label="公告标题"  prop="title">
                            <el-input 
                                type="text" 
                                placeholder="请输入" 
                                v-model="form.title"
                               
                            ></el-input>
                        </el-form-item>
                         
                        <el-form-item label="公告内容"  prop="content">
                            <el-input 
                                type="textarea" 
                                placeholder="请输入" 
                                v-model="form.content"

                            ></el-input>
                        </el-form-item>
                        <el-form-item label="公告类别"  prop="type">
                            <el-select placeholder="请选择" v-model="form.type" prefix-icon="el-icon-lock">
                                <el-option  v-for="(l,i) in annoList" :key="i" :label="l.text" :value="l.value" >
                                   
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
                                <el-button type="success" class="btn" @click="submitForm('myform')"
                                    >添加公告</el-button
                                >                         
                        </el-form-item>
                    </el-form> 
                </div>
            </el-col>   
        </el-row>
    </div>
</template>


<script >
import { reactive,toRefs,ref } from "vue"
// import {toast} from "@/utils"
import {ajax} from "@/api"
import {useStore} from "vuex"
import router from "@/router"
export default {
    name:"anno-add",
    setup(){
        const myform = ref()
        const store = useStore()
        const state = reactive({
            form:{},
            rules:{
                title:[
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur',
                    },
                ],
                content:[
                    {
                        required: true,
                        message: '请输入内容',
                        trigger: 'blur',
                    },
                ],
                type:[
                      {
                        required: true,
                        message: '请选择类型',
                        trigger: 'change',
                    },
                ]
            },
            form:{
                type:"最新公告"
            },
        })
        const resetForm = ()=>{
            myform.value.resetFields()
        }

        const submitForm = ()=>{
            myform.value.validate(async valid=>{
                if(valid){
                    state.form.userInfo = store.state.userInfo 
                    let {code,result} = await ajax.addanno(state.form)
                    if(code==200){
                        router.push({name:"anno-list"})
                    }
                }else{
                    toast.error("请输入有效的公告信息")
                }
            })
        }
        return {
            ...toRefs(state),
            myform,
            resetForm,
            submitForm
        }
    }
}
</script>